<template>
  <!-- 需求单详情 -->
  <div>
    <!--信息单 -->
    <div>
      <el-row>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect">
          <el-menu-item
            index="1"
            style="font-size : 20px;font : blod;color:black">需求单详情</el-menu-item>
          <span class="but">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-arrow-left">上一页</el-button>
              <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"/></el-button>
            </el-button-group>
            <el-button
              plain
              icon="el-icon-printer ">打印</el-button>
            <el-button
              plain
              icon="el-icon-s-order" @click="add">完成</el-button>
            <el-button
              plain
              icon="el-icon-edit">编辑</el-button>
            <el-button
              type="primary"
              icon="el-icon-top-left"
              @click="backtrack()">返回</el-button>
          </span>
        </el-menu>
        <span>
          <font style="font-size : 15px;margin-left:20px">基本信息</font>
        </span>
      </el-row>

      <el-form
        :inline="true"
        :model="formLabelAlign"
        label-position="left"
        label-width="90px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="产品线:">
              <el-input
                v-model="formLabelAlign.productLine"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="采购部门：">
              <el-input
                v-model="formLabelAlign.dep"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="仓库：">
              <el-input
                v-model="formLabelAlign.warehouse"
                :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="制单人：">
              <el-input
                v-model="formLabelAlign.createdBy"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="审核人：">
              <el-input
                v-model="formLabelAlign.single"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="成色：">
              <el-input
                v-model="formLabelAlign.condition"
                :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="制单时间：">
              <el-input
                v-model="formLabelAlign.updateTime"
                :disabled="true"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="状态：">
              <el-input
                v-if="formLabelAlign.status == 1"
                :disabled="true"
                value="定稿"/>
              <el-input
                v-if="formLabelAlign.status == 2"
                :disabled="true"
                value="定稿"/>
            </el-form-item>
          </el-col>

          <el-col
            :span="7"
            :offset="1">
            <el-form-item label="单号：">
              <el-input
                v-model="formLabelAlign.oddNumber"
                disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <el-row>-->
<!--          <el-menu-->
<!--            :default-active="activeIndex"-->
<!--            class="el-menu-demo"-->
<!--            mode="horizontal"-->
<!--            @select="handleSelect">-->
<!--            <el-menu-item-->
<!--              index="1"-->
<!--              style="font-size : 15px;color:black">产品信息</el-menu-item>-->

<!--          </el-menu>-->

<!--        </el-row>-->

      </el-form>

    </div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect">
      <el-menu-item
        index="1"
        style="font-size : 15px;color:black">产品信息</el-menu-item>

    </el-menu>
    <div>

      <!-- 产品信息表格 -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="needDemandProductId"
          label="产品编码"
          width="200"
          align="center"/>
        <el-table-column
          prop="goodsName"
          label="产品名称"
          width="200"
          align="center"/>
        <el-table-column
          prop="gong"
          label="供应商"
          width="200"
          align="center">
          <template slot-scope="scope">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="克重范围"
          width="200"
          align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.gramStart"
              style="width: 50px;" />
            ~
            <el-input
              v-model="scope.row.gramEnd"
              style="width: 50px;" />
          </template>
        </el-table-column>
        <el-table-column
          prop="gramEnd"
          label="重量"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.weight"
              style="width: 50px;" />
          </template>
        </el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          width="100"
          align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.amount"
              style="width: 50px;" />
          </template>
        </el-table-column>
        <el-table-column
          prop="carft"
          label="克效果工艺"
          width="100"
          align="center"/>
        <el-table-column
          prop="specification"
          label="规格"
          width="100"
          align="center"/>
        <el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">

            <span v-if="formLabelAlign.status == 1">
              待分配
            </span>
            <span v-if="formLabelAlign.status == 3">
              已分配
            </span>
            <span v-if="formLabelAlign.status == 4">
              待采购
            </span>
            <span v-if="formLabelAlign.status == 5">
              已完成
            </span>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page="1"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        :total="80"
        style="float:right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import operationDemandSheet from '@/api/needManager/operationDemandSheet'
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',

      formLabelAlign: {},
      tableData: [

      ],
      // 需求单对象
      requisitionForm: {
        // 基本信息对象
        basicInfo: {},
        // 产品信息对象
        goodsInfo: {},
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.selectByPage()
  },
  methods: {
    add(){
      let ta = this.tableData
      ta.gong = this.value
      console.log(this.tableData)
      this.requisitionForm.basicInfo = this.formLabelAlign
      this.requisitionForm.goodsInfo = ta
      var r = this.requisitionForm
      console.log(r)
      operationDemandSheet.add(r).then(result => {
        if (result.code == 200){
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          });
        }
      })
    },
    // 分页
    // 每页条数
    handleSizeChange(val) {
      this.pageSize = val
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNum = val
    },
    // 分页查找
    selectByPage() {
      var id = this.$route.query.id
      operationDemandSheet.find(id).then(result => {
      // this.requisitionForm = res.data.data
      // this.formLabelAlign = res.data.data.basicInfo
        this.formLabelAlign = result.data.g
        console.log(this.formLabelAlign)
       this.tableData = result.data.goodsInfo
      })
    },
    // 返回按钮
    backtrack() {
      this.$router.push({ name: 'demandList'})
    }
  }
}
</script>

<style scoped>
.but {
  float: right;
}
</style>
